<template>
	<view class="content">
		<!-- 商品封面图 @click="previewImage(index_shopimg)"-->
		<scroll-view scroll-x class="content_1">
			<view style="width: 0upx;height: 384upx;display: inline-block;"></view>
			<block v-for="(shopimg, index_shopimg) in GoodsInfo.cover_image" :key='index_shopimg'>
				<image class="shopimg_box" :src="shopimg" @click="previewImage(index_shopimg)" mode="aspectFill"></image>
			</block>
		</scroll-view>
		<view class="content_space"></view>
		<!--商品参数-->
		<view class="parameter_view">
			<view class="title_view">
				<view class="line"></view>
				<view class="parameter_title">商品详细</view>
				<view class="line"></view>
			</view>
			<block v-if="GoodsInfo.goods_type==1">
				<view class="parameter_detail">
					<view class="left_parameter">
						<view class="parameter_text">
							<view class="parameter_name">商品名称</view>
							<view class="parameter">{{GoodsInfo.goods_name}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">商品编号</view>
							<view class="parameter">{{GoodsInfo.id}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name" style="margin-left: -19upx;">品牌</view>
							<view class="parameter">无</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name" style="margin-left: -19upx;">型号</view>
							<view class="parameter">无</view>
						</view>
					</view>
					<view class="right_parameter">
						<view class="parameter_text">
							<view class="parameter_name">规格</view>
							<view class="parameter">无</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">单位</view>
							<view class="parameter">无</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">条码</view>
							<view class="parameter">无</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">SKU</view>
							<view class="parameter">无</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="parameter_detail" style="height: 300upx;">
					<view class="left_parameter">
						<view class="parameter_text">
							<view class="parameter_name">商品名称</view>
							<view class="parameter">{{GoodsInfo.goods_name}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">最低租期</view>
							<view class="parameter">{{GoodsInfo.rent_describes}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name">扣租方式</view>
							<view class="parameter">{{GoodsInfo.way_describes}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name" style="margin-left: -19upx;">押金</view>
							<view class="parameter">{{GoodsInfo.rent_money}}</view>
						</view>
						<view class="parameter_text">
							<view class="parameter_name" style="margin-left: -19upx;">租金</view>
							<view class="parameter">{{GoodsInfo.months_money}}/月</view>
						</view>
					</view>
				</view>
			</block>
			
		</view>
		<view class="content_space"></view>
		
		<view class="detail_img">
			<block v-for="value in GoodsInfo.detail_imgs">
				<image :src="value" mode="widthFix"></image>
			</block>
		</view>
		
		<view class="content_space"></view>
		<!--下单提货指南-->
		<view class="content_2">
			<view class="tip">
				下单提货指南
			</view>
			<view class="tip_view">
				<view class="tip_title">
					<view class="tip_title_point">
						<view style="width: 26upx; height: 26upx; border: 3upx solid #EC0D0D; border-radius: 30upx;"></view>
					</view>
					<view class="tip_title_text">在线下单</view>
				</view>
				<view class="tip_info">
					<view style="width: 40upx; height: 100%; border-left: 4upx solid #D8D8D8;"></view>
					<view class="tip_detail" style="line-height: 85upx;">每天可购买商品时间：{{orderpaytime}}</view>
				</view>
			</view>
			<view class="tip_view">
				<view class="tip_title">
					<view class="tip_title_point">
						<view style="width: 26upx; height: 26upx; border: 3upx solid #EC0D0D; border-radius: 30upx;"></view>
					</view>
					<view class="tip_title_text">物流配送</view>
				</view>
				<view class="tip_info">
					<view style="width: 40upx; height: 100%; border-left: 4upx solid #D8D8D8;"></view>
					<view class="tip_detail" style="line-height: 50upx;">每天{{sendtime}}之前，物流会将您昨日购买的商品配送到您购买选择的自提门店</view>
				</view>
			</view>
			<view class="tip_view">
				<view class="tip_title">
					<view class="tip_title_point">
						<view style="width: 26upx; height: 26upx; border: 3upx solid #EC0D0D; border-radius: 30upx;"></view>
					</view>
					<view class="tip_title_text">门店自提</view>
				</view>
				<view class="tip_info">
					<view style="width: 40upx; height: 100%; border-left: 4upx solid #D8D8D8;"></view>
					<view class="tip_detail" style="line-height: 85upx;">每天可购买商品时间：{{pushtime}}</view>
				</view>
			</view>
			<view class="tip_view">
				<view class="tip_title">
					<view class="tip_title_point">
						<view style="width: 26upx; height: 26upx; border: 3upx solid #EC0D0D; border-radius: 30upx;"></view>
					</view>
					<view class="tip_title_text">售后无忧</view>
				</view>
				<view class="tip_info">
					<view style="width: 40upx; height: 100%; border-left: 4upx solid #D8D8D8;"></view>
					<view class="tip_detail" style="line-height: 85upx;">每天可购买商品时间：{{saletime}}</view>
				</view>
			</view>
			<view class="tip_view">
				<view class="tip_title">
					<view class="tip_title_point">
						<view style="width: 26upx; height: 26upx; border: 3upx solid #EC0D0D; border-radius: 30upx;"></view>
					</view>
					<view class="tip_title_text">全国热线</view>
				</view>
				<view class="tip_info">
					<view style="width: 40upx; height: 100%;"></view>
					<view class="tip_detail" style="line-height: 50upx;">如果你遇到问题，请致电帮忙热线！</br>电话：{{telephone}}</view>
				</view>
			</view>
		</view>
		<!--加入购物车+提交订单-->
		<view class="content_3">
			<view class="content_3_left">
				<button class="share_shopcar" style="height: 98upx;" open-type="share" @click="Share">
					<image style="width: 45upx; height: 45upx;" mode="aspectFill" src="../../../static/shop/detail/icon/share.svg"></image>
					<view class="content_3_text">分享</view>
				</button>
				<view class="share_shopcar" @click="toShopcar">
					<view class="red_point">{{cart_num}}</view>
					<image style="width: 45upx; height: 45upx;" mode="aspectFill" src="../../../static/shop/detail/icon/shopcar.svg"></image>
					<view class="content_3_text">购物车</view>
				</view>
			</view>
			<view class="content_3_right">
				<view class="btns" style="background-color: #FBAB07;" @click="addshopcar">加入购入车</view>
				<view v-if="GoodsInfo.goods_type == 2" class="btns" style="background-color: #8AE3D7;" @click="toRent">立即租用</view>
				<view v-if="GoodsInfo.goods_type == 1" class="btns" style="background-color: #F6390D;" @click="toPay">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Request
	} from "@/utils/request.js";
	var app = getApp();
	export default {
		data() {
			return {
				id: '',
				shopname: '',
				shopprice: '',
				presale: '',
				stock: '0',
				model: '',
				parameter: '',
				telephone: '',
				orderpaytime: '',
				sendtime: '',
				pushtime: '',
				saletime: '',
				unit: '',
				specif: '',
				shopnum: '1',
				shopcar_num: '0',
				time: '',
				h: '01',
				m: '41',
				s: '10',
				shopcar_arr: [],
				LoginCode: '',

				//2020年12月22日修复BUG
				brand: '',
				mode: '',
				barcode: '',
				encode: '',
				GoodsInfo: '',
				//当前加购商品数量
				cart_num: 0,
			}
		},
		//页面加载
		onLoad: function(option) {
			//商品详情信息
			this.GoodsInfo = JSON.parse(decodeURIComponent(option.goodsinfo));
			return;
		},
		methods: {
			//预览图片
			previewImage: function(index) {
				//预览图片路径要放绝对路径,http或https
				uni.previewImage({
					current: index,
					urls: this.GoodsInfo.cover_image
				})
			},
			//加入购物车
			addshopcar: function() {
				if(this.GoodsInfo.goods_type == 2){
					new Request().showToast('租用商品不可加购');
					return;
				}
				//加入购物车操作
				new Request('goods/Cart_Add_Goods/AddCartGoods').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							goods_id: this.GoodsInfo.id,
							openid: app.globalData.openid,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						if(res.data.code == 0){
							new Request().showToast(res.data.msg);
							return;
						}
						this.showCartList();
						new Request().showToast(res.data.msg);
						//显示当前加购商品数量
						this.cart_num = res.data.cart_num;
					}
				);
			},
			showCartList: function(){
				new Request('goods/Cart_List/GetCartList').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
							
						}
					},
					(res) => {
						if(res.data.data == 0){
							this.cart_num = 0;
							return;
						}
						this.shopList = res.data.data;
						this.cart_num = this.shopList.length;
					}
				);
			},
			//跳转至购物车
			toShopcar: function() {
				if(this.shopList == 0){
					new Request().showToast('购物车为空');
					return;
				}
				uni.navigateTo({
					url: '/pages/shop/detail/shopcar/shopcar'
				})
			},
			//用户分享
			Share: function() {
				uni.showShareMenu({
					success: (res) => {
						console.log(res)
					}
				})
			},
			//立即购买，同加入购物车，多了个跳转...
			toPay: function() {
				if(this.GoodsInfo.goods_type == 2){
					new Request().showToast('租用商品不可加购');
					return;
				}
				new Request('goods/Cart_Add_Goods/AddCartGoods').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							goods_id: this.GoodsInfo.id,
							openid: app.globalData.openid,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project
						}
					},
					(res) => {
						if(res.data.code == 0){
							uni.navigateTo({
								url: '/pages/shop/detail/shopcar/shopcar?goodsinfo=' + encodeURIComponent(JSON.stringify(this.GoodsInfo)),
							});
							return;
						}
						this.showCartList();
						//当前加购商品数量
						this.cart_num = res.data.cart_num;
						uni.navigateTo({
							url: '/pages/shop/detail/shopcar/shopcar?goodsinfo=' + encodeURIComponent(JSON.stringify(this.GoodsInfo)),
						});
					}
				);
			},
			//立即租用商品
			toRent: function(){
				console.log(this.GoodsInfo);
				console.log(JSON.stringify(this.GoodsInfo));
				uni.navigateTo({
				    url: '/pages/shop/detail/sign/sign?goodsinfo=' + encodeURIComponent(JSON.stringify(this.GoodsInfo)),
				});
			}
		},
		onShow() {
			//用户登录
			uni.login({
				success: (res) => {
					new Request('User_Login/GetUserOpendInfoAndRegister').request(
						() => {
							return 'POST'
						},
						() => {
							return {
								code: res.code,
								DevelopVersion: app.globalData.DevelopVersion,
								project: app.globalData.project
							}
						},
						(res) => {
							this.LoginCode = res.data.LoginCode
							this.openId = res.data.openid
							this.sessionKey = res.data.session_key
						}
					)
				}
			});
			this.showCartList();
		}
	}
</script>

<style scoped>
	
	.detail_img image {
		width: 100%;
	}
	
	/**
	 * 商品封面图
	 */
	.cover_box{
		display: flex;
	}
	.shopimg_box {
		height: 550upx;
		width: 100%;
		/* margin-right: 22upx; */
		display: inline-block;
		/* border-radius: 8upx; */
		/* margin: 0 auto; */
	}
	/*
		商品信息
	*/
	.content_1 {
		height: 550upx;
		width: 750upx;
		display: flex;
		white-space: nowrap;
	}

	.shop_title {
		height: 140upx;
		background-color: #EC0D0D;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 30upx;
	}

	.price {
		width: 140upx;
		height: 60upx;
		color: #FFFFFF;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.countdown {
		height: 100upx;
		width: 280upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.text {
		width: 178upx;
		height: 35upx;
		font-size: 28upx;
		color: #FFFFFF;
		line-height: 35upx;
	}

	.time_view {
		width: 180upx;
		height: 60upx;
		background-color: #FFFFFF;
		border-radius: 65upx;
		padding: 0upx 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #EC0D0D;
		font-size: 28upx;
		font-weight: bold;
	}

	.time {
		width: 50upx;
		height: 50upx;
		text-align: center;
		line-height: 50upx;
	}

	.shop_detail {
		height: 123upx;
		padding: 30upx 30upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop_name {
		height: 38upx;
		font-size: 32upx;
		font-weight: bold;
	}

	.shop_num {
		height: 50upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.stock {
		height: 38upx;
	}

	.count {
		width: 172upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.sub {
		width: 45upx;
		height: 45upx;
		font-weight: bold;
		line-height: 45upx;
		display: flex;
		text-align: center;
		font-size: 44upx;
	}

	.add {
		width: 45upx;
		height: 45upx;
		font-weight: bold;
		line-height: 45upx;
		display: flex;
		text-align: center;
		font-size: 44upx;
	}

	.count_num {
		width: 70upx;
		height: 50upx;
		background-color: #F8F8F8;
		border-radius: 18upx;
		text-align: center;
		font-size: 26upx;
	}

	.content_space {
		height: 20upx;
		background-color: #F0F0F0;
	}

	/*
		商品详细
	*/
	.parameter_view {
		height: 337upx;
		background-color: #FFFFFF;
		padding-top: 30upx;
		padding-bottom: 78upx;
		padding-left: 23upx;
		padding-right: 23upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.title_view {
		width: 450upx;
		height: 40upx;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		line-height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.line {
		width: 120upx;
		height: 0upx;
		border: 1upx #BBBBBB dashed;
	}

	.parameter_detail {
		height: 245upx;
		width: 665upx;
		background: rgba(99,208,213,0.3);
		border-radius: 16upx;
		padding-top: 20upx;
		padding-left: 20upx;
		padding-right: 20upx;
		display: flex;
	}

	.left_parameter {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.right_parameter {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.parameter_text {
		height: 62upx;
		width: 333upx;
		font-size: 28upx;
		display: flex;
		justify-content: space-around;
	}

	.parameter {
		height: 62upx;
		width: 200upx;
		font-weight: bold;
		white-space: nowrap; //强制不换行
		overflow: hidden; //溢出隐藏
		text-overflow: ellipsis;
	}

	/*
		下单提货指南
	*/
	.content_2 {
		background-color: #FFFFFF;
		height: 1000upx;
		padding-top: 22upx;
		padding-left: 40upx;
		padding-right: 40upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tip {
		width: 200upx;
		height: 35upx;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		line-height: 35upx;
		padding-bottom: 40upx;
	}

	.tip_view {
		height: 135upx;
		width: 670upx;
		display: flex;
		flex-direction: column;
		padding-bottom: 10upx;
	}

	.tip_title {
		height: 30upx;
		width: 670upx;
		display: flex;
		align-items: center;
	}

	.tip_title_point {
		height: 28upx;
		width: 55upx;
	}

	.tip_title_text {
		width: auto;
		height: 30upx;
		font-size: 28upx;
		line-height: 30upx;
	}

	.tip_info {
		height: 105upx;
		width: 656upx;
		margin: 0 14upx;
		display: flex;
	}

	.tip_detail {
		height: 85upx;
		width: 615upx;
		color: #5A5A5A;
		font-size: 28upx;
		padding: 10upx 0upx;
	}

	/*
		加入购物车+提交订单
   */
	.content_3 {
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		width: 712upx;
		height: 100upx;
		padding: 15upx 20upx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.content_3_left {
		width: 180upx;
		height: 100upx;
		display: flex;
		justify-content: space-between;
	}

	.content_3_right {
		width: 460upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.share_shopcar {
		width: 75upx;
		height: 80upx;
		padding: 10upx 0upx;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		position: relative;
	}

	.share_shopcar::after {
		border: none;
	}

	.red_point {
		position: absolute;
		height: 30upx;
		width: 30upx;
		top: 5upx;
		right: 0upx;
		border-radius: 25upx;
		text-align: center;
		line-height: 30upx;
		background-color: #DD524D;
		font-size: 18upx;
		color: #FFFFFF;
	}

	.btns {
		width: 220upx;
		height: 80upx;
		border-radius: 80upx;
		font-weight: bolder;
		text-align: center;
		line-height: 80upx;
		color: #FFFFFF;
		font-size: 28upx;
	}

	.content_3_text {
		width: 75upx;
		height: 25upx;
		text-align: center;
		line-height: 25upx;
		font-size: 24upx;
	}
</style>
